<template>
  <div class="pay">
    <van-tabs sticky color="red" title-active-color="red" v-model:active="active">
      <van-tab title="代缴党费">
        <wait-pay></wait-pay>
      </van-tab>
      <van-tab title="缴费记录">
        <pay-history></pay-history>
      </van-tab>
    </van-tabs>
  </div>
  <!-- <div v-else>
    非党员
  </div> -->
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import payHistory from './components/payHistory/payHistory.vue'
import waitPay from './components/waitPay/waitPay.vue'
import { useCommonStore } from '@/store/common';
const active = ref('1')
</script>

<style lang='less' scoped>
.pay {
  color: #969799;
  background-color: #f6f8fa;
  height: 100%;
  position: relative;

  .van-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;

    .van-tabs__content {
      flex: 1;
    }
  }
}
</style>
<style lang="less">
.pay {
  .van-tabs__content {
    flex: 1;
    height: 100%;

    &>div {
      height: 100%;
    }
  }
}
</style>